<template>
  <div class="betterScroll">
    <div class="containerMall ">
      <div class="container-content">
        <div class="container-swiper">
          <swiper/>
        </div>
        <ul class="container-option">
          <li class="container-option_item"><div class="option_img_1 option_img"><img src="../assets/icon/lip.png" alt=""></div><p>美妆护肤</p></li>
          <li class="container-option_item"><div class="option_img_2 option_img"><img src="../assets/icon/watch.png" alt=""></div><p>名品腕表</p></li>
          <li class="container-option_item"><div class="option_img_3 option_img"><img src="../assets/icon/sofa.png" alt=""></div><p>超值家纺</p></li>
          <li class="container-option_item"><div class="option_img_4 option_img"><img src="../assets/icon/diamond.png" alt=""></div><p>潮流饰品</p></li>
          <li class="container-option_item"><div class="option_img_5 option_img"><img src="../assets/icon/package.png" alt=""></div><p>时尚箱包</p></li>
        </ul>
        <ul class="content-option-ul">
          <li class="content-option_item"></li>
          <li class="content-option_item safe_indent"></li>
        </ul>
      </div>
      <div class="container-content_Spike content_bgcolor">
        <div class="Spike_info"><p class="Spick_title safe_padding">限时秒杀</p></div>
        <div class="Spike_BetterScroll">
        <ul class="ul_Spike">
          <li class="ul-item_Spike"><div class="Spick_background"></div></li>
          <li class="ul-item_Spike"><div class="Spick_background"></div></li>
          <li class="ul-item_Spike"><div class="Spick_background"></div></li>
          <li class="ul-item_Spike"><div class="Spick_background"></div></li>
          <li class="ul-item_Spike"><div class="Spick_background"></div></li>
          <li class="ul-item_Spike"><div class="Spick_background"></div></li>
        </ul>
        </div>
      </div>
      <div class="container-content_activity ">
        <p class="Spike_title safe_padding content_bgcolor">精选活动</p>
        <div class="activity_box">
          <div class="activity_box_title"></div>
          <ul class="activity_ul safe_padding">
            <li class="activity_item"><div class="activity_img"></div></li>
            <li class="activity_item"><div class="activity_img"></div></li>
            <li class="activity_item"><div class="activity_img"></div></li>
          </ul>
        </div>
        <div class="activity-boxs content_marginTop">
          <div class="activity_box_title"></div>
          <ul class="activity_ul safe_padding">
            <li class="activity_item"><div class="activity_img"></div></li>
            <li class="activity_item"><div class="activity_img"></div></li>
            <li class="activity_item"><div class="activity_img"></div></li>
          </ul>
        </div>
        <div class="activity-boxs content_bottom">
          <div class="activity_box_title"></div>
          <ul class="activity_ul safe_padding">
            <li class="activity_item"><div class="activity_img"></div></li>
            <li class="activity_item"><div class="activity_img"></div></li>
            <li class="activity_item"><div class="activity_img"></div></li>
          </ul>
        </div>
      </div>
      <div class="container_bottom"></div>
    </div>
  </div>
</template>

<script>
  import  swiper from '@pcpt/Swiper/swiper';
    export default {
      name: "Recommend",
      components:{swiper},

      mounted(){
        this.scroller= new this.$BS('.betterScroll',{
          scrollX:false,
          scrollY:true,
          click:true,
        });
        this.scroller=new this.$BS('.Spike_BetterScroll',{
          scrollX:true,
          scrollY:false,
          click:true,
        });
      }
    }
</script>

<style lang="scss">
  *{
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .betterScroll{
      width: 100vw;
      height: 92vh;
      overflow: hidden;
      position: relative;
      background:#f5f5f5;
    }
  .containerMall{
    width: 100vw;
    position: fixed;
  }
  .container-content{
    padding-top: 0;
    margin-top: 2.4rem;
    box-sizing: border-box;
    width: 100vw;
    height:9.8rem;
    background: #fff;
    .container-swiper{
      width: 100vw;
      height:4rem;
      box-sizing:border-box;
    }
    .container-option{
      width: 100vw;
      height: 2.4rem;
      .container-option_item{
        width: 20%;
        height: 2.4rem;
        float:left;
        background: #fff;
        text-align: center;
        p{
          font-size: .37333rem;
          color: #333;
          line-height: .666rem;
          text-align: center;
        }
        .option_img_1 {
          background: linear-gradient(90deg,#e95ee8 0%,#fb8e9e 100%);
        }
        .option_img{
          width: 1.36rem;
          height: 1.36rem;
          border-radius: 100%;
          background-size: 100%;
          margin-left: .3rem;
          margin-top: .2rem;
          img{
            text-align: center;
            width: 75%;
            height: 75%;
            margin-top: .16rem;
          }
        }
        .option_img_2{
          background: linear-gradient(90deg,#ffb66d 0%,#ff8d45 100%);
        }
        .option_img_3{
          background: linear-gradient(90deg,#ff9586 0%,#fe5845 100%);
        }
        .option_img_4{
          background: linear-gradient(90deg,#7f7dff 0%,#5852fd 100%);
        }
        .option_img_5{
          background: linear-gradient(90deg,#9d7cff 0%,#aa51fe 100%);
        }
      }
    }
    .content-option-ul{
      padding-left: .3067rem;
      text-align: center;
      .content-option_item{
        float: left;
        box-sizing: border-box;
        display: inline-block;
        width: 4.4266rem;
        height: 2.3466rem;
        border-radius: .3rem;
        background: #fff;
        background-size: 100%;
      }
      .content-option_item:nth-child(1){
        background-image: url("../assets/icon/title-left.png");
      }
      .content-option_item:nth-child(2){
        background-image: url("../assets/icon/title-right.png");
      }
      .safe_indent{
        margin-left: .533rem;
      }
    }
  }
  .container-content_Spike{
    width: 100vw;
    height: 5.89333rem;
    margin-top: .22667rem;
    .ul_Spike{
      width: 180vw;
      height: 4rem;
      .ul-item_Spike{
        box-sizing: border-box;
        width: 2.666rem;
        height: 4rem;
        display: inline-block;
        float: left;
        border: 1px solid #f5f5f5;
        background: #FFCD8A;
        window-shadow: 2px 5px 5px 0 rgba(126,126,126,.7);
        border-radius: .18666rem;
        margin-left: .2666rem;
      }
    }
  }
  .container-content_activity{
    width: 100vw;
    height: 19.5rem;
    margin-top: .213rem;
    position: relative;
    .activity_box{
      height:  5.6rem;
      width: 100vw;
   /*   background: cadetblue;*/
      position: relative;
    }
    .activity-boxs{
      width: 100vw;
      height: 6rem;
      background: #fff;
      position: relative;
    }
    .activity_box_title{
      margin-left: .32rem;
      margin-right: .32rem;
      display: block;
      height: 1.8133rem;
      background: brown;
      box-sizing: border-box;
    }
  }
  .activity_ul{
    .activity_item{
      margin-top: .2rem;
      margin-left: .5rem;
      float: left;
      width: 2.3333rem;
      height: 3.4666rem;
      border: 1px solid #f5f5f5;
    }
    .activity_img{
      width: 2.4666rem;
      height: 2.3333rem;
    }
  }
  .safe_padding{
    padding-left: .32rem;
    padding-right: .32rem;
  }
  .Spike_title{
    text-indent: .16rem;
    font-size: .4266rem;
    line-height: 1.6rem;
  }
  .content_bgcolor{
    background: #fff;
  }
  .content_marginTop{
    margin-top: .21333rem;
  }
  .container_bottom{
    width: 100vw;
    height: .213rem;
    background: #f5f5f5;
  }
</style>
